<template>
	<view class="home-block">
		<v-top-header />
		<v-menu />
		<!-- <view style="background-color:#fff;">{{mainboardActionData}}</view> -->
		<view class="home-top">
			<u-image src="/static/icon/alarm2.gif" mode="fit" width="60" height="60" @click="showPopup(0)"
				v-if="statusAbnormalCount !== 0"></u-image>
			<view v-else></view>
			<!-- <view @click="popupTestShow=true">点击模拟测试</view> -->
		</view>

		<u-popup v-model="machineOffline" mode="center" safe-area-inset-bottom closeable :mask="true">
			<view class="machine-offline">
				<u-empty text="掘进机已离线!" icon-color="#ff052a" color="#000" font-size="30" mode="wifi"></u-empty>
			</view>
		</u-popup>

		<u-popup v-model="popupTestShow" mode="bottom" safe-area-inset-bottom closeable :mask="false">
			<view class="test-block">
				<view class="test-item">
					<view class="test-label">侧视图-铲板角度：{{deviceState.jdChanban}}</view>
					<u-slider v-model="deviceState.jdChanban" max="90"></u-slider>
				</view>
				<view class="test-item">
					<view class="test-label">侧视图-炮头角度：{{deviceState.jdPaotouCz}}</view>
					<u-slider v-model="deviceState.jdPaotouCz" max="90"></u-slider>
				</view>
				<view class="test-item">
					<view class="test-label">侧视图-后支撑角度：{{deviceState.jdHouzhicheng}}</view>
					<u-slider v-model="deviceState.jdHouzhicheng" max="90"></u-slider>
				</view>
				<view class="test-item">
					<view class="test-label">割截电流：{{deviceDataBoard.sjb4}}</view>
					<u-slider v-model="deviceDataBoard.sjb4" max="200"></u-slider>
				</view>
				<view class="test-item">
					<view class="test-label">顶视图-炮头角度：{{deviceState.jdPaotouSp}}</view>
					<u-slider v-model="deviceState.jdPaotouSp" max="90"></u-slider>
				</view>
				<view class="test-item">
					<view class="test-label">顶视图-机身角度：{{deviceState.jdJishengSp}}</view>
					<u-slider v-model="deviceState.jdJishengSp" max="90"></u-slider>
				</view>
				<view class="test-item">
					<view class="test-label">顶视图-机身远点距离左侧：{{deviceState.jlJishenYdZc}}</view>
					<u-slider v-model="deviceState.jlJishenYdZc" max="200"></u-slider>
				</view>
				<view class="test-item">
					<view class="test-label">巷道宽：{{enviromentData.hdKuan}}</view>
					<u-slider v-model="enviromentData.hdKuan" max="5000"></u-slider>
				</view>
				<view class="test-item">
					<view class="test-label">掘进机宽度：{{enviromentData.jjjKuandu}}</view>
					<u-slider v-model="enviromentData.jjjKuandu" max="1000"></u-slider>
				</view>

				<view class="test-item">
					<view class="test-label">星轮正转：{{mainboardActionData.dzb30}}</view>
					<u-input size="mini" placeholder="星轮正转" v-model="mainboardActionData.dzb30"></u-input>
				</view>

				<view class="test-item" style="margin-top:40px;">
					<view class="test-label">星轮反转：{{mainboardActionData.dzb31}}</view>
					<u-input size="mini" placeholder="星轮反转" v-model="mainboardActionData.dzb31"></u-input>
				</view>
			</view>
		</u-popup>

		<view class="machine-container">
			<view class="machine-top">
				<view class="wall-block">
					<view class="line line-left" style="justify-content:flex-start">
						<view>{{deviceState.ldZuoqian}}mm</view>
						<u-icon name="arrow-rightward" color="red" size="40"></u-icon>
					</view>
					<view class="line line-left" style="justify-content:flex-end">
						<view>{{deviceState.ldYouqian}}mm</view>
						<u-icon name="arrow-rightward" color="red" size="40"></u-icon>
					</view>
				</view>
				<machine-top ref="machineTop"></machine-top>
				<view class="wall-block">
					<view class="line line-right" style="justify-content:flex-start">
						<view>{{deviceState.ldZuohou}}mm</view>
						<u-icon name="arrow-leftward" color="red" size="40"></u-icon>
					</view>
					<view class="line line-right" style="justify-content:flex-end">
						<view>{{deviceState.ldYouhou}}mm</view>
						<u-icon name="arrow-leftward" color="red" size="40"></u-icon>
					</view>
				</view>
			</view>
			<u-divider color="#fff" bg-color="#000" half-width="280">侧视图</u-divider>
			<view class="machine-side">
				<machine-side ref="machineSide"></machine-side>
			</view>
		</view>

		<view class="left-operation-block">
			<view class="item" @click="showPopup(1)">
				<u-image src="/static/icon/communicate.png" mode="fit" width="60" height="60"></u-image>
				<view class="txt">通讯状态</view>
			</view>
			<view class="item" @click="showPopup(2)">
				<u-image src="/static/icon/sys_status.png" mode="fit" width="60" height="60"></u-image>
				<view class="txt">掘进机状态</view>
			</view>
			<view class="item" @click="showPopup(3)">
				<u-image src="/static/icon/ruler.png" mode="fit" width="60" height="60"></u-image>
				<view class="txt">进尺</view>
			</view>
		</view>

		<view class="right-operation-block">
			<view class="item" @click="showPopup(4)">
				<u-image src="/static/icon/data.png" mode="fit" width="60" height="60"></u-image>
				<view class="txt">数据</view>
			</view>
			<view class="item" @click="showPopup(5)">
				<u-image src="/static/icon/other.png" mode="fit" width="60" height="60"></u-image>
				<view class="txt">系统其他</view>
			</view>
		</view>

		<u-popup v-model="popupShow" mode="bottom" safe-area-inset-bottom closeable>
			<view class="popup-block">
				<view v-show="popupIndex === 0">
					<view class="popup-title">告警相关</view>
					<view class="data-block">
						<view class="data-item">
							<view class="title">截割接近1</view>
							<view class="value">{{alarmInfo.bj1 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">截割接近2</view>
							<view class="value">{{alarmInfo.bj2 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">截割越界</view>
							<view class="value">{{alarmInfo.bj3 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">电压超限</view>
							<view class="value">{{alarmInfo.bj4 === 1 ? 'ON':'OFF'}}</view>
						</view>

						<view class="data-item">
							<view class="title">截割电流超限</view>
							<view class="value">{{alarmInfo.bj5 === 1 ? 'ON':'OFF'}}</view>
						</view>

						<view class="data-item">
							<view class="title">油泵电流超限</view>
							<view class="value">{{alarmInfo.bj6 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">二运电流超限</view>
							<view class="value">{{alarmInfo.bj7 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">压力1超限</view>
							<view class="value">{{alarmInfo.bj8 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">压力2超限</view>
							<view class="value">{{alarmInfo.bj9 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">温度超限</view>
							<view class="value">{{alarmInfo.bj10 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">粉尘超限</view>
							<view class="value">{{alarmInfo.bj11 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">水压超限</view>
							<view class="value">{{alarmInfo.bj12 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">瓦斯超限</view>
							<view class="value">{{alarmInfo.bj13 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">人员闯入超限</view>
							<view class="value">{{alarmInfo.bj14 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">内存通讯状态1</view>
							<view class="value">{{alarmInfo.bj15 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">内存通讯状态2</view>
							<view class="value">{{alarmInfo.bj16 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">备用1</view>
							<view class="value">{{alarmInfo.bj17 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">备用2</view>
							<view class="value">{{alarmInfo.bj18 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">备用3</view>
							<view class="value">{{alarmInfo.bj19 === 1 ? 'ON':'OFF'}}</view>
						</view>
						<view class="data-item">
							<view class="title">备用4</view>
							<view class="value">{{alarmInfo.bj20 === 1 ? 'ON':'OFF'}}</view>
						</view>
					</view>
				</view>
				<view v-show="popupIndex === 1">
					<view class="popup-title">设备通讯状态</view>
					<view class="data-block">
						<view class="data-item">
							<view class="title">动作主板通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztDzzb]}}</view>
						</view>

						<view class="data-item">
							<view class="title">姿态传感器通信状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztZtcgq]}}</view>
						</view>

						<view class="data-item">
							<view class="title">无线测距设备通信状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztWxcj]}}</view>
						</view>

						<view class="data-item">
							<view class="title">数据采集板通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztSjcjb]}}</view>
						</view>
						<view class="data-item">
							<view class="title">左前距离传感器通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztZqjl]}}</view>
						</view>
						<view class="data-item">
							<view class="title">右前距离传感器通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztYqjl]}}</view>
						</view>
						<view class="data-item">
							<view class="title">左后距离传感器通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztZhjl]}}</view>
						</view>
						<view class="data-item">
							<view class="title">右后距离传感器通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztYhjl]}}</view>
						</view>
						<view class="data-item">
							<view class="title">铲板升降油缸传感器通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztCbsjyg]}}</view>
						</view>
						<view class="data-item">
							<view class="title">后支撑升降油缸传感器通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztHzcsjyg]}}</view>
						</view>
						<view class="data-item">
							<view class="title">炮头上下传感器通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztPtsxyg]}}</view>
						</view>
						<view class="data-item">
							<view class="title">炮头左右传感器通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztPtzyyg]}}</view>
						</view>
						<view class="data-item">
							<view class="title">炮头伸缩传感器通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztPtssyg]}}</view>
						</view>
						<view class="data-item">
							<view class="title">数据采集板1通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztSjcj1]}}</view>
						</view>

						<view class="data-item">
							<view class="title">数据采集板2通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztSjcj2]}}</view>
						</view>
						<view class="data-item">
							<view class="title">超挖报警输出控制板通信状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztCwbj]}}</view>
						</view>

						<view class="data-item">
							<view class="title">运行方式采集板通信状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztYxfs]}}</view>
						</view>
						<view class="data-item">
							<view class="title">canopen设备通讯状态</view>
							<view class="value">{{this.statusText[deviceCommunicationStatus.txztCanopen]}}</view>
						</view>
					</view>
				</view>
				<view v-show="popupIndex === 2">
					<view class="popup-title">掘进机状态</view>
					<view class="data-block">

						<view class="data-item">
							<view class="title">姿态数据-X轴-坡度</view>
							<view class="value">{{deviceState.ztPodu}} °</view>
						</view>
						<view class="data-item">
							<view class="title">姿态数据-X轴-翻转角度</view>
							<view class="value">{{deviceState.ztFanzhuan}} °</view>
						</view>
						<view class="data-item">
							<view class="title">姿态数据-Z轴-航向角</view>
							<view class="value">{{deviceState.ztHangxj}} °</view>
						</view>

						<view class="data-item">
							<view class="title">雷达_左前距离</view>
							<view class="value">{{deviceState.ldZuoqian}} mm</view>
						</view>
						<view class="data-item">
							<view class="title">雷达_右前距离</view>
							<view class="value">{{deviceState.ldYouqian}} mm</view>
						</view>
						<view class="data-item">
							<view class="title">雷达_左后距离</view>
							<view class="value">{{deviceState.ldZuohou}} mm</view>
						</view>
						<view class="data-item">
							<view class="title">雷达_右后距离</view>
							<view class="value">{{deviceState.ldYouhou}} mm</view>
						</view>
						<view class="data-item">
							<view class="title">角度_铲板角度</view>
							<view class="value">{{deviceState.jdChanban}} °</view>
						</view>

						<view class="data-item">
							<view class="title">角度_后支撑角度</view>
							<view class="value">{{deviceState.jdHouzhicheng}} °</view>
						</view>
						<view class="data-item">
							<view class="title">角度_炮头水平角度</view>
							<view class="value">{{deviceState.jdPaotouSp}} °</view>
						</view>
						<view class="data-item">
							<view class="title">角度_炮头垂直角度</view>
							<view class="value">{{deviceState.jdPaotouCz}} °</view>
						</view>
						<view class="data-item">
							<view class="title">距离_炮头炮头伸缩</view>
							<view class="value">{{deviceState.jlPaotaouSs}} mm</view>
						</view>
						<view class="data-item">
							<view class="title">角度_机身水平角度</view>
							<view class="value">{{deviceState.jdJishengSp}} °</view>
						</view>
						<view class="data-item">
							<view class="title">距离_机身坐标原点距巷道左侧距离</view>
							<view class="value">{{deviceState.jlJishenYdZc}} cm</view>
						</view>
						<view class="data-item">
							<view class="title">坐标_炮头X</view>
							<view class="value">{{deviceState.zbPaotouX}} cm</view>
						</view>
						<view class="data-item">
							<view class="title">坐标_炮头Y</view>
							<view class="value">{{deviceState.zbPaotouY}} cm</view>
						</view>
					</view>
				</view>
				<view v-show="popupIndex === 3">
					<view class="popup-title">进尺相关</view>
					<view class="data-block">
						<view class="data-item">
							<view class="title">当班进尺</view>
							<view class="value">{{ruleData.jinci1}}m</view>
						</view>
						<view class="data-item">
							<view class="title">累计进尺</view>
							<view class="value">{{ruleData.jinci2}}m</view>
						</view>
						<view class="data-item">
							<view class="title">实时进尺</view>
							<view class="value">{{ruleData.jinci3}}m</view>
						</view>
					</view>
				</view>
				<view v-show="popupIndex === 4">
					<view class="popup-title">数据相关</view>
					<view class="data-block">
						<view class="data-item">
							<view class="title">系统电压</view>
							<view class="value">{{deviceDataBoard.sjb1}}V</view>
						</view>
						<view class="data-item">
							<view class="title">油泵电流A</view>
							<view class="value">{{deviceDataBoard.sjb2}}A</view>
						</view>
						<view class="data-item">
							<view class="title">压力2</view>
							<view class="value">{{deviceDataBoard.sjb3}}MPa</view>
						</view>
						<view class="data-item">
							<view class="title">截割电流A</view>
							<view class="value">{{deviceDataBoard.sjb4}}A</view>
						</view>
						<view class="data-item">
							<view class="title">二运电流A</view>
							<view class="value">{{deviceDataBoard.sjb5}}A</view>
						</view>
						<view class="data-item">
							<view class="title">温度</view>
							<view class="value">{{deviceDataBoard.sjb6}}度</view>
						</view>
						<view class="data-item">
							<view class="title">油压</view>
							<view class="value">{{deviceDataBoard.sjb7}}MPa</view>
						</view>
					</view>
				</view>
				<view v-show="popupIndex === 5">
					<view class="popup-title">系统其他相关</view>
					<view class="data-block">
						<view class="data-item">
							<view class="title">累计工作时间</view>
							<view class="value">{{totalWorkingTime}}</view>
						</view>
						<view class="data-item">
							<view class="title">机身状态显示字符串</view>
							<view class="value">{{systemExt.sys2}}</view>
						</view>
						<view class="data-item">
							<view class="title">铲板状态显示字符串</view>
							<view class="value">{{systemExt.sys3}}</view>
						</view>
						<view class="data-item">
							<view class="title">后支撑状态显示字符串</view>
							<view class="value">{{systemExt.sys4}}</view>
						</view>
						<view class="data-item">
							<view class="title">星轮状态显示字符串</view>
							<view class="value">{{systemExt.sys5}}</view>
						</view>
						<view class="data-item">
							<view class="title">割臂状态显示字符串</view>
							<view class="value">{{systemExt.sys6}}</view>
						</view>
						<view class="data-item">
							<view class="title">截割状态显示字符串</view>
							<view class="value">{{systemExt.sys7}}</view>
						</view>
						<view class="data-item">
							<view class="title">一运状态显示字符串</view>
							<view class="value">{{systemExt.sys8}}</view>
						</view>
						<view class="data-item">
							<view class="title">一运状态显示字符串</view>
							<view class="value">{{systemExt.sys9}}</view>
						</view>
						<view class="data-item">
							<view class="title">当前运行方式</view>
							<view class="value" v-if="systemExt.sys10 === 0">井下本地</view>
							<view class="value" v-if="systemExt.sys10 === 1">井下遥控</view>
							<view class="value" v-if="systemExt.sys10 === 2">地面</view>
						</view>
						<view class="data-item">
							<view class="title">当前操作方式</view>
							<view class="value" v-if="systemExt.sys11 === 0">手工</view>
							<view class="value" v-if="systemExt.sys12 === 1">智能操作</view>
						</view>
						<view class="data-item">
							<view class="title">当前数据来源</view>
							<view class="value" v-if="systemExt.sys12 === 0">井下</view>
							<view class="value" v-if="systemExt.sys12 === 1">地面</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import vTopHeader from '@/components/v-top-header.vue'
	import vMenu from '@/components/v-menu.vue'
	import machineTop from '@/components/machine-top.vue'
	import machineSide from '@/components/machine-side.vue'

	var my_interval = null

	export default {
		components: {
			vTopHeader,
			vMenu,
			machineTop,
			machineSide
		},
		data() {
			return {
				machineOffline: false,
				popupTestShow: false,
				popupShow: false,
				popupIndex: 0,
				abnormalStatus: [2, 3, 5],
				statusText: ['初始状态', '打开成功', '打开失败', '异常错误', '错误恢复', '需要重新配置', '正常工作'],
				alarmInfo: {
					bj1: null,
					bj2: null,
					bj3: null,
					bj4: null,
					bj5: null,
					bj6: null,
					bj7: null,
					bj8: null,
					bj9: null,
					bj10: null,
					bj11: null,
					bj12: null,
					bj13: null,
					bj14: null,
					bj15: null,
					bj16: null,
					bj17: null,
					bj18: null,
					bj19: null,
					bj20: null
				},
				//数据板数据		
				deviceDataBoard: {
					sjb1: '-',
					sjb2: '-',
					sjb3: '-',
					sjb4: 0,
					sjb5: '-',
					sjb6: '-',
					sjb7: '-'
				},
				//进尺相关
				ruleData: {
					jinci1: '-',
					jinci2: '-',
					jinci3: '-'
				},
				//系统其他
				systemExt: {
					sys1: null,
					sys2: null,
					sys3: null,
					sys4: null,
					sys5: null,
					sys6: null,
					sys7: null,
					sys8: null,
					sys9: null,
					sys10: null,
					sys11: null,
					sys12: null
				},
				//设备通讯状态
				deviceCommunicationStatus: {
					txztDzzb: null,
					txztZtcgq: null,
					txztWxcj: null,
					txztSjcjb: null,
					txztZqjl: null,
					txztYqjl: null,
					txztZhjl: null,
					txztYhjl: null,
					txztCbsjyg: null,
					txztHzcsjyg: null,
					txztPtsxyg: null,
					txztPtzyyg: null,
					txztPtssyg: null,
					txztSjcj1: null,
					txztSjcj2: null,
					txztCwbj: null,
					txztYxfs: null,
					txztCanopen: null
				},
				//现场环境相关参数区						
				enviromentData: {
					hdKuan: null,
					hdQianggao1: null,
					hdQianggao2: null,
					hdGonggao: null,
					hdPodu: null,
					jjjChangdu: null,
					jjjKuandu: null,
					jjjGaodu: null
				},
				//掘进机状态相关							
				deviceState: {
					ztPodu: null,
					ztFanzhuan: null,
					ztHangxj: null,
					ldZuoqian: null,
					ldYouqian: null,
					ldZuohou: null,
					ldYouhou: null,
					jdChanban: null,
					jdHouzhicheng: null,
					jdPaotouSp: 0,
					jdPaotouCz: null,
					jlPaotaouSs: null,
					jdJishengSp: 0,
					jlJishenYdZc: null,
					zbPaotouX: null,
					zbPaotouY: null
				},
				mainboardActionData: {
					dzb30: null,
					dzb31: null
				}
			};
		},
		watch: {
			vuex_device(newVal, oldVal) {
				this.loadEnviromentData()
			},
			"deviceState.jdChanban"(newVal, oldVal) {
				//设置侧视图-铲板角度
				this.$refs.machineSide.machine_side_bracket_rotate = newVal
			},
			"deviceState.jdHouzhicheng"(newVal, oldVal) {
				if (newVal < 40) {
					this.$refs.machineSide.bracketDown()
				} else if (newVal > 60) {
					this.$refs.machineSide.bracketFullUp()
				} else {
					this.$refs.machineSide.bracketHalfUp()
				}
			},
			"deviceState.jdPaotouCz"(newVal, oldVal) {
				//设置侧视图-炮头角度
				this.$refs.machineSide.machine_side_arm_rotate = newVal
			},
			"deviceDataBoard.sjb4"(newVal, oldVal) {
				//设置工作状态，割截电流 >1A
				if (oldVal > 1) {
					this.$refs.machineSide.startDigging()
					this.$refs.machineTop.startDigging()
				} else {
					this.$refs.machineSide.stopDigging()
					this.$refs.machineTop.stopDigging()
				}
			},
			"deviceState.jdPaotouSp"(newVal, oldVal) {
				//顶视图-炮头角度
				this.$refs.machineTop.machine_top_arm_rotate = newVal
			},
			"deviceState.jdJishengSp"(newVal, oldVal) {
				//顶视图-机身角度
				this.$refs.machineTop.machine_top_rotate = newVal
			},
			"deviceState.jlJishenYdZc"(newVal, oldVal) {
				if (this.enviromentData.hdKuan) {
					//顶视图-机身远点距离左侧
					//246为巷道的像素宽
					//得到距离与巷道宽的比例
					let value = 246 * newVal / this.enviromentData.hdKuan
					//要乘以一个机身偏移的系数，防止压线
					if (this.deviceState.jdJishengSp && this.deviceState.jdJishengSp > 0) {
						value = value * Math.abs(this.deviceState.jdJishengSp) * 0.15
					}
					this.$refs.machineTop.machine_top_left = value
				}
			},
			"enviromentData.hdKuan"(newVal, oldVal) {
				//巷道宽
				let zoom = this.enviromentData.jjjKuandu / newVal;
				console.log(zoom)
				this.$refs.machineTop.machine_top_zoom = zoom;
			},
			"enviromentData.jjjKuandu"(newVal, oldVal) {
				//掘进机宽度
				let zoom = newVal / this.enviromentData.hdKuan;
				console.log(zoom)
				this.$refs.machineTop.machine_top_zoom = zoom;
			},
			"mainboardActionData.dzb30"(newVal, oldVal) {
				this.$refs.machineTop.stopShoveling()
				if (newVal && newVal >= 0 && newVal < 255) {
					this.$refs.machineTop.machine_shoveling = true
					this.$refs.machineTop.machine_shoveling_reverse = false
					this.$refs.machineTop.startShoveling()
				}
			},
			"mainboardActionData.dzb31"(newVal, oldVal) {
				this.$refs.machineTop.stopShoveling()
				if (newVal && newVal >= 0 && newVal < 255) {
					this.$refs.machineTop.machine_shoveling_reverse = true
					this.$refs.machineTop.machine_shoveling = false
					this.$refs.machineTop.startShoveling()
				}
			}
		},
		computed: {
			statusAbnormalCount() {
				let count = 0
				if (this.alarmInfo) {
					for (let key in this.alarmInfo) {
						if (key.indexOf('bj') !== -1 && this.alarmInfo[key] === 1) {
							console.log(key, this.alarmInfo[key])
							count++
						}
					}
				}
				console.log('count=', count)
				return count;
			},
			totalWorkingTime() {
				let totalSeconds = this.systemExt.sys1
				console.log('------------------', totalSeconds)

				if (totalSeconds === null || totalSeconds == '') return '-'

				let days = Math.floor(totalSeconds / 3600 / 24)
				let remainSeconds = totalSeconds % (3600 * 24)

				let hours = Math.floor(remainSeconds / 3600)
				remainSeconds = remainSeconds % 3600

				let minutes = Math.floor(remainSeconds / 60)
				remainSeconds = remainSeconds % 60

				let seconds = totalSeconds % 60

				if (days !== 0) return `${days}天${hours}小时${minutes}分钟${seconds}秒`

				if (hours !== 0) return `${hours}小时${minutes}分钟${seconds}秒`

				if (minutes !== 0) return `${minutes}分钟${seconds}秒`

				return `${seconds}秒`
			}
		},
		created() {
			// 如果没有设置过ip端口，直接跳到登录
			if (this.vuex_ip_list.length === 0 || this.vuex_ip_current.ip == null) {
				uni.reLaunch({
					url: '/pages/login/index'
				})
			}
		},
		mounted() {
			this.loadAlarmInfo()
			this.loadMainboardActionData()
		},
		onShow() {
			my_interval = setInterval(() => {
				this.loadDeviceState()
				this.loadEnviromentData()
				this.loadDeviceDataBoard()
				this.loadMainboardActionData()
			}, 5000)
		},
		onHide() {
			if (my_interval) {
				clearInterval(my_interval)
				my_interval = null
			}
		},
		onUnload() {
			if (my_interval) {
				clearInterval(my_interval)
				my_interval = null
			}
		},
		methods: {
			showPopup(index) {
				// console.log(index)
				if (index === 0) {

				} else if (index === 1) {
					this.loadDeviceCommunicationStatus()
				} else if (index === 2) {
					// this.loadDeviceState()
					//无需调动
				} else if (index === 3) {
					this.loadRuleData()
				} else if (index === 4) {
					this.loadDeviceDataBoard()
				} else if (index === 5) {
					this.loadSystemExt()
				}
				this.popupIndex = index
				this.popupShow = true
			},
			/**
			 * 告警相关
			 */
			loadAlarmInfo() {
				if (this.vuex_device && this.vuex_device.value) {
					this.$u.api.getAlarmInfo({
						id: this.vuex_device.value
					}).then(res => {
						if (res.success && res.result) {
							this.alarmInfo = res.result
						}
					})
				}
			},
			/**
			 * 获取数据版数据
			 */
			loadDeviceDataBoard() {
				// console.log(this.vuex_device)
				this.$u.api.getDeviceDataBoard({
					id: this.vuex_device.value
				}).then(res => {
					if (res.success) {
						if (res.result) {
							this.deviceDataBoard = res.result
						}
					} else {
						this.$u.toast(res.message)
					}
				})
			},
			/**
			 * 获取进尺数据
			 */
			loadRuleData() {
				this.$u.api.getRuleData({
					id: this.vuex_device.value
				}).then(res => {
					if (res.success) {
						if (res.result) {
							this.ruleData = res.result
						}
					} else {
						this.$u.toast(res.message)
					}
				})
			},
			/**
			 * 系统其他相关
			 * 
			 */
			loadSystemExt() {
				this.$u.api.getSystemExt({
					id: this.vuex_device.value
				}).then(res => {
					if (res.success) {
						if (res.result) {
							this.systemExt = res.result
						}
					} else {
						this.$u.toast(res.message)
					}
				})
			},
			/**
			 * 设备通讯状态变量区
			 * 
			 * @param {Object} deviceId
			 */
			loadDeviceCommunicationStatus() {
				this.$u.api.getDeviceCommunicationStatus({
					id: this.vuex_device.value
				}).then(res => {
					if (res.success) {
						if (res.result) {
							this.deviceCommunicationStatus = res.result
						}
					} else {
						this.$u.toast(res.message)
					}
				})
			},
			/**
			 * 环境参数
			 * 
			 */
			loadEnviromentData() {
				this.$u.api.getEnviromentData({
					id: this.vuex_device.value
				}).then(res => {
					if (res.success) {
						if (res.result) {
							this.enviromentData = res.result
						}
					} else {
						this.$u.toast(res.message)
					}
				})
			},
			/**
			 * 掘进机状态相关
			 * 
			 */
			loadDeviceState() {
				this.$u.api.getDeviceState({
					id: this.vuex_device.value
				}).then(res => {
					if (res.success) {
						this.machineOffline = res.result == null ? true : false
						if (res.result) {
							this.deviceState = res.result
						}
					} else {
						this.$u.toast(res.message)
					}
				})
			},
			loadMainboardActionData() {
				if (this.vuex_device && this.vuex_device.value) {
					this.$u.api.getMainboardActionData({
						id: this.vuex_device.value
					}).then(res => {
						if (res.success) {
							if (res.result) {
								this.mainboardActionData = res.result
							}
						} else {
							this.$u.toast(res.message)
						}
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.home-block {
		height: 100vh;
		background: #000;

		.home-top {
			color: #fff;
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100vw;
			height: 60rpx;
			// background-color: yellow;
		}

		.machine-offline {
			width: 300rpx;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.machine-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			// background-color: red;
			height: 80vh;
			overflow: hidden;

			.machine-top {
				width: 100vw;
				display: flex;
				padding: 20upx 20upx;
				height: 50vh;

				.wall-block {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.line {
						width: 200upx;
						height: 40%;
						color: #fff;
						padding: 0 10rpx;
						font-weight: bolder;
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-size: 20upx;
					}

					.line-left {
						border-right: 5rpx solid #fff;
						align-items: flex-end;
					}

					.line-right {
						border-left: 5rpx solid #fff;
						align-items: flex-start;
					}
				}
			}

			.machine-side {
				height: 28vh;
			}
		}

		.left-operation-block {
			position: absolute;
			top: 25vh;
			left: 20rpx;
			color: #fff;
			font-size: 22rpx;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-bottom: 45rpx;

				.txt {
					margin-top: 10rpx;
				}
			}
		}

		.right-operation-block {
			position: absolute;
			top: 25vh;
			right: 20rpx;
			color: #fff;
			font-size: 22rpx;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-bottom: 45rpx;

				.txt {
					margin-top: 10rpx;
				}
			}
		}

		.popup-block {
			background: none;
			position: relative;

			.popup-title {
				padding: 30upx;
				font-size: 36upx;
				font-weight: bold;
				position: fixed;
				top: 0;
				width: 100vw;
				background-color: #fff;
			}

			.data-block {
				height: 800upx;
				width: 100vw;
				padding-top: 110upx;

				.data-item {
					padding: 20upx 40upx;
					display: flex;
					justify-content: space-between;
					border-top: 2upx solid #ebebeb;
				}
			}
		}
	}

	.test-block {
		padding: 20rpx 40rpx;
		height: 46vh;

		.test-item {
			width: 100%;
			height: 80rpx;

			.test-label {
				margin-bottom: 20rpx;
			}
		}
	}
</style>